<template>
  <!-- 实际上就是内容展示的区域
  template下面 必须只能存在一个标签
-->
  <div>
    <!--style="float: right"-->
    <el-container>
      <el-header></el-header>
      <el-main></el-main>
      <el-footer></el-footer>
    </el-container>
    <el-row>
      <el-col :span="8" style="float: center">
        <img alt="Vue logo" src="@/assets/NULL.png" />
      </el-col>
      <el-col :span="8" style="float: center">
        <img alt="Vue logo" src="@/assets/logoH.png" />
        <h3 style="color:cornflowerblue">用户登录</h3>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" style="float: center">
        <img alt="Vue logo" src="@/assets/NULL.png" />
      </el-col>
      <el-col :span="8" header-align="center">
        <el-card shadow="hover"
          ><el-form ref="form" :model="user">
            <el-form-item label="用户编号">
              <el-input v-model="user.uid"></el-input>
            </el-form-item>
            <el-form-item label="用户密码">
              <el-input
                v-model="user.password"
                show-password
                placeholer="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即登录</el-button>
              <el-button type="primary" plain @click="toRegistry"
                >立即注册</el-button
              >
            </el-form-item>
          </el-form></el-card
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 所有的js代码
// 将axios引用过来
import axios from 'axios'
export default {
  name: 'LoginView',
  // 数据
  data() {
    return {
      user: {
        uid: '',
        password: '',
      },
    }
  },
  //方法
  methods: {
    onSubmit() {
      console.log(this.user)
      if(this.user.uid===''){
        if(this.user.password===''){
          location.reload(0)
        }
      }
      if(this.user.password===''){
          location.reload(0)
        }
        if(this.user.uid===''){
          location.reload(0)
        }
      // axios({
      //   url: '/users/login',
      //   type: 'post',
      //   data: JSON.stringify(this.user),
      //   headers: {
      //     'Content-Type': 'application/json'
      //   }
      // })
      axios
        .post('http://localhost:8088/user/login', this.user,
        )
        .then((resp) => {
          console.log(resp)
          if (resp.data === 200) {
            console.log('登录成功')
            //  调用路由跳转组件显示
            this.$router.push({
              name: 'TodoListView',
              params: {
                uid: this.user.uid,
              }
            })
          }else if(resp.data === 500){
              if(confirm("输入有误，请重新输入！")){
                location.reload(0)
              }
            }
        })
    },
    toRegistry() {
      this.$router.push('/registry')
    },
  },
}
</script>

<style scoped>
/* css代码 */
</style>